
<template>
<div>
  <div id="pic" style="margin:0 auto;width: 1000px; height: 700px;"></div>
  <div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">节点关系提示区</div>
          
</div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.drawing();
  },
  data() {
    return {
      webkitDep: {
        categories: [
          //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
          {
            name: "企业关系" //企业关系
          },
          {
            name: "银行关系" //银行关系
          },
          {
            name: "合作关系" //合作关系
          }
        ],
        nodes: [
          //展示的节点
          {
            name: "天阳宏业", //节点名称
            symbolSize: 60,
            level: 1,
            tooltip:
              "项目名称:天阳宏业<br/>到位资金:314<br/>拨付资金:743<br/>余额:-429",
            symbol: "roundRect",
            category: 0 //与关系网类别索引对应，此处只有一个关系网所以这里写0
          },
          {
            name: "南方事业部",
            symbolSize: 40,
            level: 2,
            depth: 0,
            category: 0
          },
          {
            name: "北方事业部",
            symbolSize: 40,
            level: 2,
            category: 0
          },
          {
            name: "福建",
            symbolSize: 20,
            level: 3,
            category: 0
          },
          {
            name: "广州",
            symbolSize: 20,
            level: 3,
            category: 0
          },
          {
            name: "北京",
            symbolSize: 20,
            level: 3,
            category: 0
          },
          {
            name: "成都",
            symbolSize: 20,
            level: 3,
            category: 0
          },
          {
            name: "中国人民银行", //节点名称
            symbolSize: 60,
            level: 1,
            category: 1 //与关系网类别索引对应，此处只有一个关系网所以这里写0
          },
          {
            name: "建设银行", //节点名称
            symbolSize: 60,
            level: 1,
            category: 1 //与关系网类别索引对应，此处只有一个关系网所以这里写0
          },
          {
            name: "中国证监会", //节点名称
            symbolSize: 80,
            level: 1,
            category: 2 //与关系网类别索引对应，此处只有一个关系网所以这里写0
          }
        ],
        links: [
          //节点之间连接
          {
            source: 0, //起始节点，0表示第一个节点
            target: 1 //目标节点，1表示与索引为1的节点进行连接
          },
          {
            source: 0,
            target: 2
          },
          {
            source: 1,
            target: 3
          },
          {
            source: 1,
            target: 4
          },
          {
            source: 2,
            target: 5
          },
          {
            source: 2,
            target: 6
          },
          {
            source: 7,
            target: 9
          },
          {
            source: 7,
            target: 8
          }
        ]
      }
    };
  },
  methods: {
    addNodes() {
      for (var index = 0; index < 200; index++) {
        var n = Math.floor(Math.random() * 3);
        var m = Math.floor(Math.random() * index);
        var element = {
          name: "节点" + index,
          symbolSize: 10,
          level: 3,
          category: n
        };
        var linkitem = {
          source: 10 + index,
          target: m
        };
        this.webkitDep.links.push(linkitem);
        this.webkitDep.nodes.push(element);
      }
    },
    openOrFold(params) {  //该事件会提示节点间关系
        var str = this.appendPath(params);
        document.getElementById("main_1").innerHTML = str;
        return str;
    },
    handelClick(params){
      if (params.dataType == "node") {
            //点击线是不能搜索的，因此判断触发点击事件的数据是否是节点
            if (params.data.level == "3") {
              alert("已经是最后一级了哈");
            } else {
              debugger
              this.myChart.setOption(this.option)
            }
          }
    },
    appendPath(params){    //拼接节点关系并显示在左下角
        var option = this.myChart.getOption();
        var series = option.series[params.seriesIndex]; //获取图表
        var nodesOption = series.data;//获取所有数据
        var links= series.edges;//获取所有连线
        if(params.dataType=="node"){ //dataType可以是edge(线条)或node(数据)
            var id=params.data.id;
            var categoryName = series.categories[params.data.category].name;//获取当前节点的图例名称
            var str=categoryName+":"+nodesOption[id].name;
            var i = 0;
            var map = {};
            for( i = 0 ; i < links.length; i++){
                map[links[i].source] = links[i].target;
            }
            while(true){           
                if(map[id] == undefined){
                    break;
                }
                //获取父节点的图例名称并连接
                str =series.categories[nodesOption[map[id]].category].name+":"+nodesOption[map[id]].name+"->" + str; 
                id = map[id] ;
            }
            return str;
        }else if(params.dataType=="edge"){ //当鼠标停留在连线上时，暂不处理
            return "";
        }
    },
    drawing() {
      this.addNodes();
      const myChart = echarts.init(document.getElementById("pic"));
      
      var option = {
        title: {
          text: "视图简介：企业关系谱",
          x: "right",
          y: "bottom"
        },
        toolbox: {
            show : true,
            feature : {
                restore : {show: true},
                magicType: {show: true, type: ['force', 'chord']},
                saveAsImage : {show: true}
            }
        },
        noDataEffect: 'none',
        legend: {
          //表头控件
          show: true,
          data: [
            { name: "企业关系", icon: "rect" }, //icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            { name: "银行关系", icon: "triangle" },
            { name: "合作关系", icon: "pin" }
          ] //此处的数据必须和关系网类别中name相对应
        },
        tooltip: {
          show: true, //默认显示
          showContent: true, //是否显示提示框浮层
          trigger: "item", //触发类型，默认数据项触发
          triggerOn: "mousemove", //提示触发条件，mousemove鼠标移至触发，还有click点击触发
          alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
          showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
          hideDelay: 200, //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
          enterable: false, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          position: "right", //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
          confine: false, //是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
          transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
          formatter: function(params, ticket, callback) {
          }
        },
        series: [
          {
            type: "graph",
            layout: "force",
            animation: false,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
            hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
            coordinateSystem : null,//坐标系可选
            xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
            yAxisIndex : 0, //y轴坐标 
            edgeSymbol: ['none', 'arrow'],
            roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
            draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。
            edgeSymbolSize: 10, //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
            minRadius: 5,
            maxRadius: 8,
            gravity: 1.1,
            scaling: 1.1,
            steps: 10,
            large: true,
            useWorker: true,
            coolDown: 0.995,
            ribbonType: false,
            lineStyle: {
              //==========关系边的公用线条样式。
              normal: {
                color: "rgba(222,0,23,0.4)",
                width: "1",
                type: "dashed", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                curveness: 0.2, //线条的曲线程度，从0到1
                opacity: 1
                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              },
              emphasis: {
                //高亮状态
              }
            },
            data: this.webkitDep.nodes.map(function(node, idx) {
              node.id = idx;
              node.itemStyle = {
                normal: {
                  //默认样式
                  label: {
                    show: true
                  },
                  borderType: "solid", //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
                  borderColor: "rgba(120,215,0,0.4)", //设置图形边框为淡金色,透明度为0.4
                  borderWidth: 2, //图形的描边线宽。为 0 时无描边。
                  opacity: 1
                  // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                },
                emphasis: {
                  //高亮状态
                }
              };
              node.label = {
                normal: {
                  show: true,
                  position: "outside", //标签的位置。['50%', '50%'] [x,y]
                  textStyle: {
                    //标签的字体样式
                    color: "#873", //字体颜色
                    fontStyle: "normal", //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                    fontWeight: "bolder", //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200
                    fontFamily: "sans-serif", //文字的字体系列
                    fontSize: 10 //字体大小
                  }
                }
              };
              return node;
            }),
            categories: this.webkitDep.categories,
            focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
            force: {
              //力引导图基本配置
              initLayout: "", //力引导的初始化布局，默认使用xy轴的标点
              repulsion: 20, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
              gravity: 0.01, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength: [50,80], //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
              layoutAnimation: true
              //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
            },
            edges: this.webkitDep.links
          }
        ]
      };
      myChart.setOption(option);
      this.myChart = myChart;
      this.option = option

      myChart.on("click", this.handelClick)
      //'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 
      myChart.on("mouseover", this.openOrFold)
    }
  }
};
</script>
 
​